<template>
	<view class="withdrawal">
		<topTitle :title="$t('withdrawal.title')">
			<template #right>
				<image class="icon" @click="goTo('/pages/index/bill')" src="@/static/image/62.png" mode="widthFix" />
			</template>
		</topTitle>
		<view class="withdrawableType">
			<view>
				<view>{{$t('withdrawal.withdrawable')}}</view>
				<view>{{ UserMoneyObj.balance }} <text>USDT</text> </view>
			</view>
			<!-- <view>
				<view>待處理金額</view>
				<view>0 USDT</view>
			</view> -->
		</view>
		<view class="com">
			<!-- <view>
				<view class="title">付款方式</view>
				<view class="ipt">
					<view class="arrow" @click="show=true">请选择付款方式</view>
					<text class="rate">1 TRX = 0.235670 USDT</text>
				</view>
			</view> -->
			<view>
				<view class="title">{{$t('withdrawal.withdrawalInfo')}}</view>
				<view class="ipt">
					<view><input type="number" :placeholder="$t('withdrawal.enterAmount')" v-model="money" /></view>
					<view><textarea :placeholder="$t('withdrawal.enterAddress')" v-model="wallet_address" /></view>
					<!-- <view><input type="text" placeholder="聯絡資訊" /></view> -->
				</view>
			</view>
			<view class="info">
				<view>
					<view>{{$t('withdrawal.fee')}}</view>
					<view>{{ money ? (money * WithdrawalConfigObj.withdrawal_fees).toFixed(2) : 0 }} USDT</view>
				</view>
				<view>
					<view>{{$t('withdrawal.arrival')}}</view>
					<view>{{ money ? (money - money * WithdrawalConfigObj.withdrawal_fees).toFixed(2) : 0 }} USDT</view>
				</view>
			</view>
			<up-button class="btn" :text="$t('withdrawal.confirm')" @click="saveFn"></up-button>
			<view class="tips">
				{{$t('withdrawal.tips')}}<br />
				{{$t('withdrawal.minimumWithdrawal',{minAmount: WithdrawalConfigObj.single_min})}}<br />
				{{$t('withdrawal.withdrawalTime',{startTime:WithdrawalConfigObj.start_time ,endTime: WithdrawalConfigObj.end_time,frequency:WithdrawalConfigObj.frequency})}}
			</view>
		</view>

		<up-popup :show="show" :round="25" mode="bottom" @close="show = false" @open="show = true" closeable>
			<view class="filter" @touchmove.stop>
				<view class="title">{{$t('withdrawal.paymentMethod')}}</view>
				<view class="filterList">
					<view class="active">TRC20-USDT</view>
					<view>TRX</view>
				</view>
			</view>

		</up-popup>


	</view>
</template>


<script setup lang="ts">
	import { ref, getCurrentInstance } from "vue";
	const instance = getCurrentInstance()?.appContext.config.globalProperties;
	import { onShow } from "@dcloudio/uni-app";
	import { UserMoney, UserInfo, } from "@/api/UserApi";
	import { WithdrawalConfig } from "@/api/SystemApi";
	let show = ref(false);
	let money = ref<any>();
	let wallet_address = ref<string>();
	let UserMoneyObj = ref<any>({})
	let UserInfoObj = ref<any>({})
	let WithdrawalConfigObj = ref<any>({})
	const initFn = () => {
		UserInfoObj.value = uni.getStorageSync("userInfo");
		UserMoneyObj.value = uni.getStorageSync("UserMoney");
		WithdrawalConfigObj.value = uni.getStorageSync("WithdrawalConfig");

	}
	const saveFn = () => {
		if (!money.value) {
			uni.showToast({
				title: instance?.$t("withdrawal.enterAmount"),
				icon: "none"
			});
			return;
		}
		if (!wallet_address.value) {
			uni.showToast({
				title: instance?.$t("withdrawal.enterAddress"),
				icon: "none"
			});
			return;
		}
		if (money.value < WithdrawalConfigObj.value.single_min) {
			uni.showToast({
				title: instance?.$t("withdrawal.minWithdrawalLimit", { minAmount: WithdrawalConfigObj.value.single_min }),
				icon: "none"
			});
			return;
		}
		if (money.value > UserMoneyObj.value.balance) {
			uni.showToast({
				title: instance?.$t("withdrawal.balanceNotEnough"),
				icon: "none"
			});
			return;
		}

		instance?.goTo(`/pages/setUp/enterPsw?type=withdrawal&money=${money.value}&wallet_address=${wallet_address.value}`);
	};

	onShow(async () => {
		money.value = ''
		wallet_address.value = ''
		initFn()
		await UserMoney()
		await UserInfo()
		await WithdrawalConfig()
		initFn()

	})
</script>
<style scoped lang="scss">
	@import "../../static/scss/withdrawal.scss";
</style>